<template>
    <div class="rechargeRecord">
        <el-card>
            <el-input type="textarea" :rows="4" placeholder="请输入手机号,enter换行" oninput="value=value.replace(/[^\d\n.]/g,'')"
                v-model="inputText" class="input-width">
            </el-input>
            <el-button type="primary" @click="SetPhones">添加</el-button>

            <br>
            <el-input v-model="phonesTwo" placeholder="请输入手机号" oninput="value=value.replace(/[^\d.]/g,'')"
                maxlength="11" class="input-width2"></el-input>
            <el-button type="primary" @click="GetPhones">查询</el-button>

            <el-dialog title="查询成功" :visible.sync="dialogVisible" width="30%">
               <h2>已存在</h2>
                <!-- <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span> -->
            </el-dialog>

        </el-card>
    </div>
</template>

<script>

import { PhoneOne, PhoneTwo } from "@/api/log";
// 引入防抖函数
import debounce from "lodash.debounce";
export default {
    data() {
        return {
            inputText: "",
            phonesTwo: "",
            dialogVisible: false,
            PhoneList: []
        };
    },
    async created() {

    },
    methods: {
        async SetPhones() {

            if (this.inputText == "") {
                this.$message.error('请输入手机号');

            } else {
                try {
                  
                    this.inputText = this.inputText.replace(/\s/g, '');
                    // 根据一定规则分割输入文本
                    const segments = [];
                    let startIndex = 0;
                    const step = 11; // 每段的长度

                    while (startIndex < this.inputText.length) {
                        if ((this.inputText.length - startIndex) % step !== 0) {
                            this.$message.error('输入手机号有误,请检查');
                            return;
                        }
                        segments.push(this.inputText.slice(startIndex, startIndex + step));
                        startIndex += step;
                    }


                    

                    for (const segment of segments) {
                        //校验手机号
                    const phoneNumberRegex = /^1[3-9]\d{9}$/;
                    if (!phoneNumberRegex.test(segment)) {
                        this.$message.error('请输入正确的手机号');

                    } else {
                       
                        let res = await PhoneOne(segment)
                            this.$message({
                                message: '添加成功',
                                type: 'success',
                                duration: 500
                            });
                            
                        }
                       
                    }


                } catch (error) {
                    console.error('调用接口出错:', error);
                }
            }

        },
        async GetPhones() {
            let res = await PhoneTwo(this.phonesTwo)
            if (res.code == 200) {
                this.dialogVisible = true
                this.PhoneList = res
            } else {
                this.$message.error(res.msg);
            }
        }



    },
};
</script>
<style scoped>
.input-width {
    width: 260px;
    margin: 0 10px;
}

.input-width2 {
    width: 260px;
    margin: 40px 10px;
}
</style>